<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
     <link rel="stylesheet" href="../css/ratchet.css" />
    <style type="text/css">
        #myCanvas{border:dashed 2px #CCC}
		#button2{
			position:absolute;
			left:700px;
			top:10px;
			}
    </style>
    
    <body>
        <canvas id="myCanvas" width="700px" height="400px">
        </canvas>
        <div id="title" style="position:absolute;left:210px;top:10px;">
            	<h4>数据1-2014年某公司销售业绩</h4>
                <h5 align="center">南城启航</h5>
            </div>
         <div id="point1" style="position:absolute;left:20px;top:90px;">
         		<h6>300</h6>
         </div>
         <div id="point2" style="position:absolute;left:20px;top:180px;">
         		<h6>200</h6>
         </div>
         <div id="point3" style="position:absolute;left:20px;top:270px;">
         		<h6>100</h6>
         </div>
         <div id="yuandian" style="position:absolute;left:20px;top:360px;">
         		<h6>&nbsp;&nbsp;0</h6>
         </div>
         
           <div id="button2">
           	<h2>&nbsp;&nbsp;Canvas柱状图</h2>
            <ul><button class="btn btn-primary" onClick="startdrawcolumn()" style="height:60px; width:150px;"><font face="微软雅黑" size="+1">显示原始数据</font></button></ul>
            <ul><button class="btn btn-negative" onClick="randomdata()"  style="height:60px; width:150px;"><font face="微软雅黑" size="+1">切换随机数据</font></button></ul>
           </div>
           
            <nav class="bar bar-tab">
 				 <a class="tab-item active" href="index-mob.html">基于HTML5的3D数据展示软件</a>
                 <a class="tab-item" href="canvasLine.php">上一个（折线图）</a>
                 <a class="tab-item" href="canvasArea.php">下一个（面积图）</a>
			</nav>
    </body>
    <script type="text/javascript">
	
	
	
	
	function startdrawcolumn(){
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,700,400);

		//var columndata=new Array(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
<?php
                $link=mysql_connect(SAE_MYSQL_HOST_M.':'.SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS);
                if($link)
                {
                    mysql_select_db(SAE_MYSQL_DB,$link);
                    //your code goes here	
                }
                $sql ="SELECT data FROM CColumn order by id asc";
                $result = mysql_query($sql)
                        or die(SQL语句执行失败);
                        echo 'var columndata=new Array(';
                        while($row =mysql_fetch_row($result))
                        {	
                            echo $row[0].',';
                                //echo 'var areadata=new Array('.$row[0].', '.$row[1].', '.$row[2].', '.$row[3].', '.$row[4].', '.$row[5].', '.$row[6].', '.$row[7].', '.$row[8].', '.$row[9].', '.$row[10].', '.$row[11].');';													
                        }
                        echo '0);';
                        mysql_free_result($result);
                        mysql_close();
?>
		for(var i=0;i<12;i++){
			columndata[i]=110+Math.abs((columndata[i]-300)*0.9);
			}
		var columndata2=new Array(11);
		for(var m=0;m<12;m++){
			columndata2[m]=columndata[m];
			columndata2[m]=380-columndata2[m];
			}
			//110为纵轴最高标识点的纵坐标
			//140为最高标识点的数值
			//0.9为纵轴实际长度（270）/纵轴数值长度（300）
		/*	var columndata=new Array(11);
			for(var m=0;m<12;m++){
				columndata2[i]=380-columndata[i];
				}
				*/

	/*	for(var i=0;i<11;i++){
			var plus=columndata[n]-columndata[i]
			Math.abs(plus);
			columndata[i]=plus/0.5+columndata[i];
			columndata[i]=380-columndata[i];
			n=n+1;
			}
	*/
			//将数据进行处理从而适应在canvas中建立的坐标
			
	//数据组
		
		
		ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(97.5,380);
		ctx.lineTo(97.5,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(142.5,380);
		ctx.lineTo(142.5,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(187.5,380);
		ctx.lineTo(187.5,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(232.5,380);
		ctx.lineTo(232.5,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(277.5,380);
		ctx.lineTo(277.5,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(322.5,380);
		ctx.lineTo(322.5,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(367.5,380);
		ctx.lineTo(367.5,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(412.5,380);
		ctx.lineTo(412.5,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(457.5,380);
		ctx.lineTo(457.5,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(502.5,380);
		ctx.lineTo(502.5,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(547.5,380);
		ctx.lineTo(547.5,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(592.5,380);
		ctx.lineTo(592.5,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		//ctx.beginPath();
		ctx.fillStyle="#35a2ff";
		ctx.strokeStyl="#35a2ff";
		ctx.fillRect(75,columndata[0],22.5,columndata2[0]);
		ctx.strokeRect(75,columndata[0],22.5,columndata2[0]);
		
		//1
		
		ctx.fillRect(120,columndata[1],22.5,columndata2[1]);
		ctx.strokeRect(120,columndata[1],22.5,columndata2[1]);
		//2
		
		ctx.fillRect(165,columndata[2],22.5,columndata2[2]);
		ctx.strokeRect(165,columndata[2],22.5,columndata2[2]);
		//3
		
		ctx.fillRect(210,columndata[3],22.5,columndata2[3]);
		ctx.strokeRect(210,columndata[3],22.5,columndata2[3]);
		//4
		
		ctx.fillRect(255,columndata[4],22.5,columndata2[4]);
		ctx.strokeRect(255,columndata[4],22.5,columndata2[4]);
		//5
		
		ctx.fillRect(300,columndata[5],22.5,columndata2[5]);
		ctx.strokeRect(300,columndata[5],22.5,columndata2[5]);;
		//6
		
		ctx.fillRect(345,columndata[6],22.5,columndata2[6]);
		ctx.strokeRect(345,columndata[6],22.5,columndata2[6]);;
		//7
		
		ctx.fillRect(390,columndata[7],22.5,columndata2[7]);
		ctx.strokeRect(390,columndata[7],22.5,columndata2[7]);
		//8
		
		ctx.fillRect(435,columndata[8],22.5,columndata2[8]);
		ctx.strokeRect(435,columndata[8],22.5,columndata2[8]);
		//9
		
		ctx.fillRect(480,columndata[9],22.5,columndata2[9]);
		ctx.strokeRect(480,columndata[9],22.5,columndata2[9]);
		//10
		
		ctx.fillRect(525,columndata[10],22.5,columndata2[10]);
		ctx.strokeRect(525,columndata[10],22.5,columndata2[10]);
		//11
		
		ctx.fillRect(570,columndata[11],22.5,columndata2[11]);
		ctx.strokeRect(570,columndata[11],22.5,columndata2[11]);
		//12
		//ctx.stroke();
		}
		
		
		
		
		function randomdata(){
			var columndata=new Array(11);
			for(q=0;q<12;q++){
				columndata[q]=Math.round(Math.random()*300);
			}
			for(var i=0;i<12;i++){
			columndata[i]=110+Math.abs((columndata[i]-300)*0.9);
			}
			
			
			var columndata2=new Array(11);
			for(var m=0;m<12;m++){
			columndata2[m]=columndata[m];
			columndata2[m]=380-columndata2[m];
			}
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d")
			ctx.clearRect(0,0,700,400);
			
			ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(97.5,380);
		ctx.lineTo(97.5,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(142.5,380);
		ctx.lineTo(142.5,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(187.5,380);
		ctx.lineTo(187.5,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(232.5,380);
		ctx.lineTo(232.5,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(277.5,380);
		ctx.lineTo(277.5,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(322.5,380);
		ctx.lineTo(322.5,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(367.5,380);
		ctx.lineTo(367.5,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(412.5,380);
		ctx.lineTo(412.5,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(457.5,380);
		ctx.lineTo(457.5,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(502.5,380);
		ctx.lineTo(502.5,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(547.5,380);
		ctx.lineTo(547.5,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.moveTo(592.5,380);
		ctx.lineTo(592.5,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		//ctx.beginPath();
		ctx.fillStyle="#35a2ff";
		ctx.strokeStyl="#35a2ff";
		ctx.fillRect(75,columndata[0],22.5,columndata2[0]);
		ctx.strokeRect(75,columndata[0],22.5,columndata2[0]);
		
		//1
		
		ctx.fillRect(120,columndata[1],22.5,columndata2[1]);
		ctx.strokeRect(120,columndata[1],22.5,columndata2[1]);
		//2
		
		ctx.fillRect(165,columndata[2],22.5,columndata2[2]);
		ctx.strokeRect(165,columndata[2],22.5,columndata2[2]);
		//3
		
		ctx.fillRect(210,columndata[3],22.5,columndata2[3]);
		ctx.strokeRect(210,columndata[3],22.5,columndata2[3]);
		//4
		
		ctx.fillRect(255,columndata[4],22.5,columndata2[4]);
		ctx.strokeRect(255,columndata[4],22.5,columndata2[4]);
		//5
		
		ctx.fillRect(300,columndata[5],22.5,columndata2[5]);
		ctx.strokeRect(300,columndata[5],22.5,columndata2[5]);;
		//6
		
		ctx.fillRect(345,columndata[6],22.5,columndata2[6]);
		ctx.strokeRect(345,columndata[6],22.5,columndata2[6]);;
		//7
		
		ctx.fillRect(390,columndata[7],22.5,columndata2[7]);
		ctx.strokeRect(390,columndata[7],22.5,columndata2[7]);
		//8
		
		ctx.fillRect(435,columndata[8],22.5,columndata2[8]);
		ctx.strokeRect(435,columndata[8],22.5,columndata2[8]);
		//9
		
		ctx.fillRect(480,columndata[9],22.5,columndata2[9]);
		ctx.strokeRect(480,columndata[9],22.5,columndata2[9]);
		//10
		
		ctx.fillRect(525,columndata[10],22.5,columndata2[10]);
		ctx.strokeRect(525,columndata[10],22.5,columndata2[10]);
		//11
		
		ctx.fillRect(570,columndata[11],22.5,columndata2[11]);
		ctx.strokeRect(570,columndata[11],22.5,columndata2[11]);
		//12
		//ctx.stroke();
			}
    </script>
</html>